/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-09 16:34:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-09 18:38:09
 * @FilePath: /three-react/src/pages/CurveGeometry/Line1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render3);
      state.isMounted = true;
    }
  }, [])



  function render2(scene) {
    const geometry = new THREE.BufferGeometry();


    const p1 = new THREE.Vector2(-80, 0);
    const p2 = new THREE.Vector2(20, 100);
    const p3 = new THREE.Vector2(80, 0);
    const p4 = new THREE.Vector2(100, 50);

    // 二维二次贝塞尔曲线
    // const curve = new THREE.QuadraticBezierCurve(p1, p2, p3)
    // const points = curve.getPoints(50);
    // geometry.setFromPoints(points)


     // 二维二次贝塞尔曲线
     const curve = new THREE.CubicBezierCurve(p1, p2, p3, p4)
     const points = curve.getPoints(50);
     geometry.setFromPoints(points)

    const material = new THREE.LineBasicMaterial({
      color: 0xff0000,
    })

    const line = new THREE.Line(geometry, material); 
    
    const geometryHelper = new THREE.BufferGeometry();
    const vertices = new Float32Array([
      -80, 0,
      20, 100,
      80, 0,
      100, 50,
    ]);

    const attribute = new THREE.BufferAttribute(vertices, 2);
    geometryHelper.attributes.position = attribute

    const bezierHelper = new THREE.Line(geometryHelper, material); 


    const group = new THREE.Group()
    group.add(line)
    group.add(bezierHelper)

    scene.add(group);
  }


  function render3(scene) {
    const geometry = new THREE.BufferGeometry();


    // 三维二次贝塞尔曲线
     const p1 = new THREE.Vector3(-80, 0, 20);
     const p2 = new THREE.Vector3(-40, 50, 30);
     const p3 = new THREE.Vector3(50, 50, 100);
    //  const p4 = new THREE.Vector3(80, 0, 100);
    const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3)
    const points = curve.getPoints(50);
    geometry.setFromPoints(points)


     // 三维二次贝塞尔曲线
    //  const p1 = new THREE.Vector3(-80, 0, 20);
    //  const p2 = new THREE.Vector3(-40, 50, 30);
    //  const p3 = new THREE.Vector3(50, 50, 100);
    //  const p4 = new THREE.Vector3(80, 0, 100);
    //  const curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4)
    //  const points = curve.getPoints(50);
    //  geometry.setFromPoints(points)

    const material = new THREE.LineBasicMaterial({
      color: 0xff0000,
    })

    const line = new THREE.Line(geometry, material); 
    
    // const geometryHelper = new THREE.BufferGeometry();
    // const vertices = new Float32Array([
    //   -80, 0,
    //   20, 100,
    //   80, 0,
    //   100, 50,
    // ]);

    // const attribute = new THREE.BufferAttribute(vertices, 2);
    // geometryHelper.attributes.position = attribute

    // const bezierHelper = new THREE.Line(geometryHelper, material); 


    const group = new THREE.Group()
    group.add(line)
    // group.add(bezierHelper)

    scene.add(group);
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}